<template>
  <!-- 遮罩层2 -->
  <div
    v-if="showPopup1026"
    class="mask1025"
  >
    <div class="popup-container1025">
      <!-- 头部 -->
      <div class="popup-header1025">
        <h3 class="title1025">設定中心</h3>
        <CloseBold
          class="close-icon1025"
          style="color: #fff"
          @click="showPopup1026 = false"
        />
      </div>
      <!-- 主体 -->
      <div class="popup-body1025">
        <div class="tabs-container1025 flex_column">
          <div>
            <div
              v-for="(tab, index) in tabs1026"
              :key="tab.value"
              class="tab-item1025"
              :class="{ active1025: activeTab1025 === tab.value }"
              @click="emits('update:activeTab1025', tab.value)"
            >
              <span style="height: 24px">
                <img
                  :src="getImageUrl2(index)"
                  width="24px"
                  height="24px"
                  alt=""
                />
              </span>
              <span class="iuyhdw7913u314f"> {{ tab.label }}</span>
            </div>
          </div>
          <div class="tab-item1025 logo_out" @click="handleShow1027('out')">
            <span style="height: 24px">
              <img
                src="../assets/setup11.png"
                width="24px"
                height="24px"
                alt=""
              />
            </span>
            <span class="iuyhdw7913u314f">退出登入</span>
          </div>
        </div>
        <!-- 右侧内容 -->
        <div class="content-container1025" @scroll="handleScroll" ref="containerRef">
          <div v-if="activeTab1025 === 'cz1413'" class="cz1413">
            <p class="title_text">個人資訊</p>
            <div class="list_content">
              <div class="item_list">
                <p class="key">賬戶</p>
                <div class="value">
                  <p>{{ userInfo.username }}</p>
                </div>
              </div>
              <div class="item_list">
                <p class="key">UID</p>
                <div class="value">
                  <p>{{ userInfo.id }}</p>
                  <i class="iconfont icon-fuzhi" @click="useCopy(userInfo.id)"></i>
                </div>
              </div>
              <div class="item_list">
                <p class="key">身份認證</p>
                <div class="value">
                  <p v-if="userInfo.verify_identity" class="verify">已认证</p>
                  <p else class="verify" @click="activeTab1025 = 'sfrz1413'">
                    去认证
                  </p>
                </div>
              </div>
              <div class="item_list">
                <p class="key">邀請碼</p>
                <div class="value">
                  <p>{{ userInfo.invitation_code }}</p>
                  <i class="iconfont icon-fuzhi" @click="useCopy(userInfo.id)"></i>
                </div>
              </div>
              <div class="item_list">
                <p class="key">郵箱</p>
                <div class="value">
                  <p>{{ userInfo.email }}</p>
                </div>
              </div>
              <div class="item_list">
                <p class="key">手機號</p>
                <div class="value">
                  <p>{{ userInfo.phone }}</p>
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeTab1025 === 'tl1413'" class="cz1413">
            <div class="setup_list" v-if="!second">
              <p class="title">安全設置</p>
              <div class="list_item" @click="changePasd('one')">
                <p class="key">設置交易密碼</p>
                <i class="iconfont icon-youjiantou"></i>
              </div>
              <div class="list_item" @click="changePasd('two')">
                <p class="key">修改登入密碼</p>
                <i class="iconfont icon-youjiantou"></i>
              </div>
            </div>
            <div class="set_password" v-if="secondPage == 'one' && second">
              <div class="title_content">
                <i
                  class="iconfont icon-zuojiantou-1"
                  @click="second = false"
                ></i>
                <p class="title">設置交易密碼</p>
              </div>
              <div class="list_item">
                <div class="item">
                  <p class="key">用户名</p>
                  <div class="value">
                    <input
                      type="text"
                      v-model="userInfo.username"
                      placeholder="請輸入姓名"
                      :disabled="true"
                    />
                  </div>
                </div>
                <div class="item">
                  <div class="pasd">
                    <p class="key">交易原密碼</p>
                    <p class="key_tip">初始交易密碼為登入密碼</p>
                  </div>
                  <div class="value">
                    <input
                      :type="pasdShow ? 'text' :'password'"
                      v-model="tradeInfo.trading_pin"
                      placeholder="請輸入交易原密碼"
                    />
                    <i class="iconfont " :class="pasdShow ? 'icon-zhengyan':'icon-icon-eye-close'" @click="handleEye('pasd')"></i>
                  </div>
                </div>

                <div class="item">
                  <p class="key">交易新密碼</p>
                  <div class="value">
                    <input
                      :type="newShow ?'text':'password'"
                      v-model="tradeInfo.new_trading_pin"
                      placeholder="請輸入交易新密碼"
                    />
                    <i class="iconfont" :class="newShow ? 'icon-zhengyan':'icon-icon-eye-close'" @click="handleEye('newPasd')"></i>
                  </div>
                </div>

                <div class="item">
                  <p class="key">確認新密碼</p>
                  <div class="value">
                    <input
                      :type="repnewShow ? 'text':'password'"
                      v-model="tradeInfo.rep_new_trading_pin"
                      placeholder="請輸入確認登入密碼"
                    />
                    <i class="iconfont" :class="repnewShow ? 'icon-zhengyan':'icon-icon-eye-close'" @click="handleEye('repNewPasd')"></i>
                  </div>
                </div>
              </div>
              <el-button
                class="addbtn submit_btn"
                @click="toConfirm"
                :loading="tradeLoading"
                >提交</el-button
              >
            </div>
            <div class="set_logo_pasd" v-if="secondPage == 'two' && second">
              <div class="title_content">
                <i
                  class="iconfont icon-zuojiantou-1"
                  @click="second = false"
                ></i>
                <p class="title">修改登入密碼</p>
              </div>
              <div class="list_item">
                <div class="item">
                  <p class="key">用户名</p>
                  <div class="value">
                    <input
                      type="text"
                      v-model="userInfo.username"
                      placeholder="請輸入姓名"
                      :disabled="true"
                    />
                  </div>
                </div>
                <div class="item">
                  <div class="pasd">
                    <p class="key">登入原密码</p>
                    <!-- <p class="key_tip">初始交易密碼為登入密碼</p> -->
                  </div>
                  <div class="value">
                    <input :type="logPasd ? 'text' :'password'" v-model="loginInfo.password" placeholder="请输入登入原密码"/>
                    <i class="iconfont" :class="logPasd ? 'icon-zhengyan':'icon-icon-eye-close'" @click="handleEye('logPasd')"></i>
                  </div>
                </div>

                <div class="item">
                  <p class="key">登入新密碼</p>
                  <div class="value">
                    <input :type="logNewPasd ? 'text' :'password'" v-model="loginInfo.new_password" placeholder="请输入登入新密码"/>
                    <i class="iconfont" :class="logNewPasd ? 'icon-zhengyan':'icon-icon-eye-close'"  @click="handleEye('logNewPasd')"></i>
                  </div>
                </div>

                <div class="item">
                  <p class="key">確認新密碼</p>
                  <div class="value">
                    <input :type="logRepNewPasd ? 'text' :'password'" v-model="loginInfo.rep_new_password" placeholder="请確認新密碼"/>
                    <i class="iconfont" :class="logRepNewPasd ? 'icon-zhengyan':'icon-icon-eye-close'" @click="handleEye('logRepNewPasd')"></i>
                  </div>
                </div>
              </div>
              <el-button
                class="addbtn submit_btn"
                @click="handleLoginPasd"
                :loading="tradeLoading"
              >
                確認
              </el-button>
            </div>
          </div>
          <div v-if="activeTab1025 === 'zjjv1413'" class="zjjv1413">
            <p class="invite_title">邀請好友</p>
            <p class="invite_info">共同探索財富的秘密</p>
            <span class="invite_desc"
              >只需一次簡單的邀請，您和您的好友就能在使用我們的產品進行的每一筆交易中獲得額外的佣金回報</span
            >
            <div class="img_content">
              <div class="img_code">
                <qrcode-vue
                  :value="userInfo.invitation_code"
                  :options="qrOptions"
                  class="qrcode-image"
                />
              </div>
              <div class="img_right">
                <img
                  src="@/assets/ggimg.png"
                  alt=""
                />
              </div>
            </div>
            <div class="list_content">
              <div class="list_item">
                <p class="key">邀请码</p>
                <div class="item_right">
                  <p class="text2">{{ userInfo.invitation_code }}</p>
                  <i class="iconfont icon-fuzhi" @click="useCopy(userInfo.invitation_code)"></i>
                </div>
              </div>
              <div class="list_item">
                <p class="key">邀请网址</p>
                <div class="item_right">
                  <p class="text2">xxxx.com</p>
                  <i class="iconfont icon-fuzhi" @click="useCopy('xxxx.com')"></i>
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeTab1025 === 'sfrz1413'" class="zjjv1413 cz1413">
            <p class="invite_title">身份认证</p>
            <div class="set_password">
              <div class="list_item">
                <div class="item">
                  <p class="key">用户名</p>
                  <div class="value">
                    <input
                      type="text"
                      v-model="Authentication.real_name"
                      placeholder="請輸入姓名"
                    />
                  </div>
                </div>
                <div class="item">
                  <p class="key">证件号码</p>
                  <div class="value">
                    <input
                      type="text"
                      v-model="Authentication.id_number"
                      placeholder="請輸入身份证件号码"
                    />
                  </div>
                </div>
                <div class="item">
                  <p class="key">上传证件正面</p>
                  <div class="value id_card">
                    <el-upload
                      class="avatar-uploader"
                      :action="action"
                      :headers="headers"
                      :show-file-list="false"
                      :on-success="
                        (response, file, fileList) =>
                          handleAvatarSuccess(response, file, fileList, 'front')
                      "
                    >
                      <img
                        v-if="Authentication.id_front"
                        :src="url + Authentication.id_front"
                        class="avatar"
                      />
                      <el-icon v-else class="avatar-uploader-icon"
                        ><Plus
                      /></el-icon>
                    </el-upload>
                  </div>
                </div>
                <div class="item">
                  <p class="key">上传证件背面</p>
                  <div class="value id_card">
                    <el-upload
                      class="avatar-uploader"
                      :action="action"
                      :headers="headers"
                      :show-file-list="false"
                      :on-success="
                        (response, file, fileList) =>
                          handleAvatarSuccess(response, file, fileList, 'back')
                      "
                    >
                      <img
                        v-if="Authentication.id_back"
                        :src="url + Authentication.id_back"
                        class="avatar"
                      />
                      <el-icon v-else class="avatar-uploader-icon"
                        ><Plus
                      /></el-icon>
                    </el-upload>
                  </div>
                </div>
                <el-button
                  class="addbtn add_margin"
                  @click="handleReal"
                  :loading="tradeLoading"
                >
                  確認
                </el-button>
              </div>
            </div>
          </div>
          <div v-if="activeTab1025 === 'ydsz1413'" class="zjjv1413 cz1413">
            <el-button
              class="submit_btn"
              @click="handleSelectType('add', {})"
              v-if="addressList.length == 0"
            >
              添加U盾地址
            </el-button>
             <!-- 一级页面标题 -->
            <p class="invite_title" v-if="!editList && usbSecondPage=='one'">U盾设置</p>
            <!-- 二级页面标题 -->
            <div class="title_content" v-else>
                <i
                  class="iconfont icon-zuojiantou-1"
                  @click="handleChangeType"
                ></i>
                <p class="title">{{subType == "add" ?'添加':'编辑'}}U盾信息</p>
              </div>
            <div class="set_password address_content">
              <div
                class="list_item"
                v-if="editList"
              >
                <div class="item">
                  <p class="key">U盾地址</p>
                  <div class="value">
                    <input
                      type="text"
                      v-model="usbInfo.address"
                      placeholder="請輸入U盾地址"
                    />
                  </div>
                </div>
                <div class="item">
                  <p class="key">U盾类型</p>
                  <div class="value">
                    <input
                      type="text"
                      v-model="usbInfo.type"
                      placeholder="請輸入U盾类型"
                    />
                  </div>
                </div>
                <el-button
                  class="add_margin addbtn"
                  @click="handleUsd"
                  :loading="tradeLoading"
                >
                  {{ subType == "add" ? "添加" : "编辑" }}
                </el-button>
              </div>

              <div
                class="usb_address"
                v-if="addressList.length !== 0 && !editList && usbSecondPage=='one'"
              >
                <div
                  class="list_item"
                  v-for="(item, index) in addressList"
                  :key="index"
                >
                  <div class="item_top">
                    <div class="item">
                      <p class="key">U盾地址</p>
                      <p class="value">{{ item.address }}</p>
                    </div>
                    <div class="item">
                      <p class="key">U盾类型</p>
                      <p class="value">{{ item.type }}</p>
                    </div>
                  </div>
                  <div class="list_bottom">
                    <div class="item" @click="handleSelectType('edit', item)">
                      <i class="iconfont icon-bianji"></i>
                      <span class="edit">编辑</span>
                    </div>
                    <div class="item" @click="handleDelUsb(item)">
                      <i class="iconfont icon-shanchu"></i>
                      <span class="edit">删除</span>
                    </div>
                  </div>
                </div>
                <loadbottom :page='page' :listLenght="listLength" :loadingType="loadingType"/>
                <el-button
                  class="add_margin addbtn"
                  @click="handleSelectType('add', {})"
                  :loading="tradeLoading"
                >
                  {{ subType == "add" ? "添加" : "编辑" }}
                </el-button>
              </div>
            </div>
            <!--  -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref,defineProps, defineEmits } from "vue";
const showPopup1026 = ref(false)
const tabs1026 = ref([
  { label: "個人資訊", value: "cz1413" },
  { label: "安全設置", value: "tl1413" },
  { label: "分享邀請", value: "zjjv1413" },
  { label: "身份认证", value: "sfrz1413" },
  { label: "U盾设置", value: "ydsz1413" },
]);
const getImageUrl2 = (index) => {
  return new URL(`../assets/setup${index + 1}.png`, import.meta.url).href;
};
const emits = defineEmits(['updateActiveTab1025'])
const closeShow=()=>{
    showPopup1026.value = false
}
const openShow=()=>{
    showPopup1026.value = true
}
const props = defineProps({
        activeTab1025: String,
        userInfo:Object,
		// listLenght:Number,
		// loadingType:String
	})
defineExpose({
	  closeShow,
	  openShow
	})
</script>
<style scoped lang="less">
/* 遮罩层 */
.mask1025 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 17, 18, 0.6);
  backdrop-filter: blur(8px);
  /* 关键属性 - 模糊程度 */
  z-index: 1000;

  /* 弹窗主体 */
  .popup-container1025 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 643px;
    background: #21232a;
    border-radius: 8px;
    color: #ffffff;

    /* 头部样式 */
    .popup-header1025 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 24px;
      border-bottom: 1px solid #3c3e47;

      .title1025 {
        margin: 0;
        font-size: 16px;
      }

      .close-icon1025 {
        width: 22px;
        height: 22px;
        padding: 3px;
        color: #fff;
        background-color: #f7d04c;
        cursor: pointer;
        font-size: 16px;
        border-radius: 50%;
        color: rgba(0, 0, 0, 0.45);
      }
    }

    /* 主体布局 */
    .popup-body1025 {
      display: flex;
      height: calc(100% - 57px);
      .flex_column {
        flex-direction: column;
        display: flex;
        justify-content: space-between;
      }
      /* 左侧 tabs */
      .tabs-container1025 {
        width: 277px;
        border-right: 1px solid #3c3e47;
        padding: 16px 10px;

        .tab-item1025 {
          padding: 15px;
          cursor: pointer;
          transition: background 0.3s;
          border-radius: 8px;
          border: 1px #42423f solid;
          margin-bottom: 12px;
          font-size: 14px;
          display: flex;
          align-items: center;

          .iuyhdw7913u314f {
            margin-left: 10px;
          }

          &.active1025 {
            background: #f7d04c;
            // border-right: 3px solid #1890ff;
          }
        }
      }
      .submit {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 20px;
        .submit_pay {
          width: 40%;
          background-color: #589cf8;
          color: #fff;
          border-radius: 5px;
          font-size: 16px;
          padding: 2px 0;
          border: none;
          line-height: 2.5;
          cursor: pointer;
        }
      }

      /* 右侧内容 */
      .input_list {
        width: 100%;
        .input_item {
          width: 100%;
          .key {
            margin-top: 15px;
            color: #fff;
            font-size: 14px;
          }
          .input_text {
            width: 100%;
            padding: 0 15px;
            border-radius: 6px;
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            background-color: #202b2c;
            margin-top: 10px;
            color: #fff;
          }
          .usd_price {
            display: flex;
            align-items: center;
            padding: 0 15px;
            border-radius: 6px;
            height: 44px;

            font-size: 16px;
            margin-top: 10px;
            background-color: #202b2c;
            input {
              height: 100%;
              line-height: 44px;
              flex: 1;
              color: #fff;
            }
            .all {
              font-size: 14px;
              color: #fff;
              background-color: #589cf8;
              border-radius: 3px;
              padding: 2px 5px;
              font-size: 14px;
              cursor: pointer;
            }
          }
        }
      }
      .content-container1025 {
        flex: 1;
        padding: 24px;
        overflow: auto;
        .cz1413 {
          .title_text {
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 15px;
            color: #fff;
          }
          .set_password,
          .set_logo_pasd {
            width: 100%;

            .title_content {
              width: 100%;
              display: flex;
              align-items: center;
              .iconfont {
                font-size: 24px;
                cursor: pointer;
              }
              .title {
                margin-bottom: 0;
                color: #fff;
                font-size: 24px;
                font-weight: normal;
                padding-left: 7px;
              }
            }
            .list_item {
              width: 100%;
              .item {
                width: 100%;
                margin-top: 15px;
                .key {
                  font-size: 14px;
                  color: #fff;
                  opacity: 0.7;
                }
                .key_tip {
                  margin-top: 5px;
                  color: #f35956;
                  font-size: 14px;
                }
                .value {
                  padding: 0 15px;
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  background-color: #202b2c;
                  margin-top: 10px;
                  height: 44px;
                  line-height: 44px;
                  input {
                    width: 100%;
                    border-radius: 6px;
                    font-size: 16px;
                    color: #fff;
                  }
                }
                .id_card {
                  padding: 0;
                  height: 200px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 10px;
                  position: relative;

                  .avatar-uploader {
                    width: 100%;
                    height: 100%;
                  }
                  .avatar {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                    object-fit: cover;
                  }
                  .iconfont {
                    font-size: 26px;
                  }
                  .file_text {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                  }
                  .file_text::-webkit-file-upload-button {
                    visibility: hidden;
                  }
                  .file_text::before {
                    // content: '选择文件';
                    display: inline-block;
                    background: linear-gradient(top, #f9f9f9, #e3e3e3);
                    border: 1px solid #999;
                    border-radius: 3px;
                    padding: 5px 8px;
                    outline: none;
                    white-space: nowrap;
                    -webkit-user-select: none;
                    cursor: pointer;
                    text-shadow: 1px 1px #fff;
                    font-weight: 700;
                    font-size: 10pt;
                  }
                  .file-label::after {
                    content: "点击上传文件";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    color: white;
                  }
                }
              }
            }
            .addbtn {
              width: 100%;
              margin-top: 20px;
              background-color: #589cf8;
              color: #fff;
              border-radius: 5px;
              font-size: 16px;
              border: none;
              height: 45px;
              line-height: 45px;
              position: static;
              top: 0%;
              left: 0%;
              transform: translate(-0%, -0%);
            }
            .add_margin {
              margin-bottom: 30px;
            }
          }
          .addbtn {
            width: 100%;
            margin-top: 10px;
            background-color: #589cf8;
            color: #fff;
            border-radius: 5px;
            font-size: 16px;
            border: none;
            height: 45px;
            line-height: 45px;
            position: static;
            top: 0%;
            left: 0%;
            transform: translate(-0%, -0%);
          }
          .address_content {
            .usb_address {
              width: 100%;
              margin-top: 20px;
              .list_item {
                padding: 15px;
                background-color: #202b2c;
                border-radius: 10px;
                margin-bottom: 10px;
                .item_top {
                  width: 100%;
                  .item {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 5px 0;
                    margin-top: 0px;
                    .key {
                      color: #fff;
                      opacity: 0.7;
                      font-size: 14px;
                    }
                    .value {
                      width: auto;
                      font-weight: 500;
                      color: #fff;
                      font-size: 14px;
                      height: auto;
                      line-height: 20px;
                    }
                  }
                }
                .list_bottom {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;

                  .item {
                    width: auto;
                    display: flex;
                    align-items: center;
                    margin-left: 10px;
                    padding-top: 0px;
                    cursor: pointer;

                    img {
                      width: 15px;
                      height: 15px;
                    }
                    .iconfont {
                      font-size: 16px;
                      color: #f7d04c;
                      margin-left: 5px;
                    }
                    .edit {
                      font-size: 14px;
                      color: #f7d04c;
                      margin-left: 5px;
                    }
                  }
                }
              }
            }
          }
          .setup_list {
            width: 100%;
            .title {
              font-weight: 700;
              font-size: 18px;
              margin-bottom: 15px;
              color: #fff;
            }
            .list_item {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              cursor: pointer;
              border-radius: 10px;
              padding: 15px;
              margin-bottom: 15px;
              background-color: #202b2c;
              .key {
                font-size: 14px;
                color: #fff;
              }
              .iconfont {
                font-size: 12px;
                color: #fff;
              }
            }
          }
          .list_content {
            width: 100%;
            .item_list {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              cursor: pointer;
              border-radius: 10px;
              padding: 15px;
              margin-bottom: 15px;
              background-color: #202b2c;
              .key {
                color: #fff;
                font-size: 14px;
              }
              .value {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                p {
                  color: #fff;
                  font-size: 14px;
                }
                .verify {
                  color: #f7d04c;
                }
                .icon-fuzhi {
                  font-size: 16px;
                  color: #f7d04c;
                  margin-left: 5px;
                }
              }
            }
          }
          .title {
            margin-bottom: 10px;
            font-size: 18px;
            color: #fff;
          }
          .topupMethod {
            width: 60%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 15px;
            .text_btn {
              width: 48%;
              height: 40px;
              text-align: center;
              border: 1px solid #3c3e47;
              color: hsla(0, 0%, 100%, 0.7);
              color: #fff;
              border-radius: 5px;
              font-size: 16px;
              line-height: 35px;
              cursor: pointer;
            }
            .active_text_btn {
              background-color: #589cf8;
              color: #fff;
            }
          }
          .select_info {
            width: 100%;
            .select_content {
              width: 100%;
              position: relative;
              .num_list {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-radius: 10px;
                padding: 15px;
                background-color: #202b2c;
                .list_left {
                  display: flex;
                  align-items: center;
                  .Gold_coin_type {
                    width: 25px;
                    height: 25px;
                    background-color: #687ee3;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                  .coin_type_text {
                    font-size: 16px;
                    margin-left: 10px;
                    cursor: pointer;
                  }
                }
                .icon-youjiantou {
                  font-size: 14px;
                  transform: rotate(90deg);
                }
              }
              .select_list {
                position: absolute;
                top: 60px;
                width: 100%;
                padding: 0 15px;
                background-color: #555;
                border-radius: 10px;
                z-index: 2;
                li {
                  border-bottom: 1px solid #3c3e47;
                  cursor: pointer;
                  display: flex;
                  align-items: center;
                  padding: 15px 0;
                  z-index: 2;
                  .left_icon {
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                  .color1 {
                    background-color: #009393;
                  }
                  .color2 {
                    background-color: #2775ca;
                  }
                  .color3 {
                    background-color: #687ee3;
                  }
                  .color4 {
                    background-color: #f7931a;
                  }
                  .icon_text {
                    font-size: 16px;
                    margin-left: 10px;
                    color: #fff;
                  }
                  //   .icon_text:hover{

                  //   }
                }
                li:hover {
                  .icon_text {
                    color: #f7d04c;
                  }
                }
              }
            }
            .text_list {
              width: 100%;
              .text_item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px;
                .key {
                  font-size: 14px;
                  color: #fff;
                  opacity: 0.6;
                }
                .value {
                  font-size: 14px;
                  color: #fff;
                  opacity: 0.5;
                }
              }
              .add_color {
                .key {
                  font-size: 16px;
                  opacity: 1;
                }
                .value {
                  font-size: 16px;
                  opacity: 1;
                }
              }
            }
            .to_url {
              width: 100%;
              display: flex;
              align-items: center;
              padding-top: 15px;
              .left_icon {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #687ee3;
                margin-right: 15px;
                .icon-ethereum {
                  font-size: 30px;
                }
              }
              .right_icon {
                flex: 1;
                .title_text {
                  color: #fff;
                  font-size: 14px;
                }
                .url_bottom {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  border-radius: 10px;
                  font-weight: 700;
                  padding: 15px;
                  margin-top: 10px;
                  background-color: #202b2c;
                  .url_text {
                    font-size: 11px;
                    color: #589cf8;
                  }
                  .icon-fuzhi {
                    color: #589cf8;
                    cursor: pointer;
                  }
                }
              }
            }
            .exchange_rate {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding-top: 15px;
              .exchange_rate_text {
                width: 100%;
                border-radius: 10px;
                border: 1px solid #666;
                text-align: center;
                font-size: 16px;
                padding: 15px;
                color: #fff;
              }
            }
          }
          .select_list {
            width: 100%;
            .pay_type {
              border-radius: 10px;
              padding: 15px;
              background-color: #202b2c;
              display: flex;
              align-items: center;
              img {
                width: 25px;
                height: 25px;
                cursor: pointer;
              }
              .pay_name {
                font-size: 16px;
                margin-left: 10px;
                cursor: pointer;
              }
            }
            .exchange_rate {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding-top: 15px;
              .exchange_rate_text {
                width: 100%;
                border-radius: 10px;
                border: 1px solid #666;
                text-align: center;
                font-size: 16px;
                padding: 15px;
                color: #fff;
              }
            }

            .pay_text {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 15px;
              .text_left {
                font-size: 16px;
                color: #fff;
              }
              .text_right {
                font-size: 16px;
                color: #fff;
              }
            }
          }
        }
        .zjjv1413 {
          width: 100%;
          height: 100%;
          position: relative;
          .title_content {
            width: 100%;
            display: flex;
            align-items: center;
            .iconfont {
              font-size: 20px;
              cursor: pointer;
            }
            .title {
              margin-bottom: 0;
              color: #fff;
              font-size: 20px;
              font-weight: normal;
              padding-left: 7px;
            }
          }
          .submit_btn {
            width: 100%;
            margin-top: 20px;
            background-color: #589cf8;
            color: #fff;
            border-radius: 5px;
            font-size: 16px;
            border: none;
            height: 45px;
            line-height: 45px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          .invite_title {
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 5px;
            color: #fff;
            cursor: pointer;
          }
          .invite_info {
            font-size: 15px;
            margin-bottom: 10px;
            color: #fff;
            cursor: pointer;
          }
          .invite_desc {
            color: #fff;
            opacity: 0.75;
            font-size: 12px;
            cursor: pointer;
          }
          .img_content {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding-top: 15px;
            padding-bottom: 30px;
            .img_code {
              border: 2px solid #fff;
              border-radius: 10px;
              //   padding: 5px;
              width: 110px;
              height: 110px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              align-items: center;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .img_right {
              width: 200px;
              height: 200px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .list_content {
            width: 100%;
            .list_item {
              width: 100%;
              border-radius: 10px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              background-color: #202b2c;
              padding: 15px;
              margin-bottom: 10px;
              cursor: pointer;
              .key {
                color: #fff;
                font-size: 12px;
              }
              .item_right {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                color: #589cf8;
                font-weight: 700;
                p {
                  font-size: 10px;
                }
                .icon-fuzhi {
                  font-size: 12px;
                  margin-left: 5px;
                }
              }
            }
          }
          .list_title {
            width: 100%;
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            .title_item {
              height: 43px;
              line-height: 43px;
              position: relative;
              margin-right: 20px;
              cursor: pointer;
              .name {
                color: #fff;
                opacity: 0.6;
                font-size: 14px;
              }
              .underline {
                position: absolute;
                bottom: 0;
                left: 50%;
                width: 20px;
                height: 3px;
                background-color: transparent;
                transition: background-color 0.3s;
                transform: translateX(-50%);
                border-radius: 8px;
              }
              .active {
                background-color: #f5bd08; /* 选中时下划线颜色 */
                border-radius: 8px;
              }
            }
          }
          .list_content {
            height: calc(100% - 55px);
            overflow: hidden;
            overflow-y: auto;
            flex: 1;
            .item {
              width: 100%;
              border-bottom: 1px solid #3c3e47;
              padding-bottom: 15px;
              margin-bottom: 15px;
              .item_text {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 5px 0;
                .key {
                  font-size: 14px;
                  opacity: 0.7;
                  color: #fff;
                }
                .value {
                  font-size: 14px;
                  color: #fff;
                  font-weight: 700;
                }
                .add_bold {
                  font-size: 16px;
                }
                .name {
                  font-weight: 700;
                  font-size: 15px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>